<template>
  <div>

    <!-- 左（上下）右-->
    <section class="container">
      <!--左边-->
      <el-row type="flex">
        <el-col :md="18" :xs="24" :sm="24">
          <div class="mt20">
          <span class="fsize20">{{movie.title}}</span>
          </div>
          <div >
            <vue-ckplayer ref="player"  :source="videoUrl" :style="playStyle" />
          </div>

          <!--电影描述-->
          <div class="mt15 mb20">
            <el-card>

              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="电影详情" name="description">
                  <section class="course-txt-body">
                    <p v-html="movie.description">{{movie.description}}</p>
                  </section>
                </el-tab-pane>
                <el-tab-pane label="用户评论" name="comment">
                  <span slot="label"><i class="el-icon-chat-dot-round"></i> 用户评论</span>
                  <div >
                    <ul>
                      <CommentBox
                        :userInfo="userInfo"
                        :commentInfo="commentInfo"
                        @submit-box="submitBox"
                        :showCancel="showCancel"
                      ></CommentBox>
                      <div class="message_infos">
                        <CommentList :comments="comments" :commentInfo="commentInfo"></CommentList>
                        <div class="noComment" v-if="comments.length ==0">还没有评论，快来抢沙发吧！</div>
                      </div>
                    </ul>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </div>
        </el-col>

        <!--右边-->
        <el-col  class="hidden-sm-and-down" :md="6">
          <!--剧情集数-->
          <div class="ml15 mt50">
            <el-menu
              :default-active="`/video/`+video.videoId"
              class="el-menu-vertical-demo"
              background-color="#f4f4f4"
              text-color="#222"
              active-text-color="#00a1d6"
              router
            >
              <el-submenu index="0">
                <template slot="title">
                  <i class="el-icon-film"></i>
                  <span>剧集列表</span>
                </template>
                <el-menu-item  :index="`/video/`+video.videoId" v-for="video in movie.videoList" :key="video.videoId" >
                  {{video.title}}
                  <div class="fr">
                    <i  class="free-icon vam">免费试听</i>
                  </div>
                </el-menu-item>

              </el-submenu>
            </el-menu>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>



   <!-- <button @click="setFull">全屏</button>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <button @click="setVolume(1)">设置音量</button>
    <button @click="addListenerPlayer()">addListenerPlayer</button>-->


</template>

<script>
  import vueCkplayer from '@/components/video/player'
  import movieApi from '@/api/movie'
  import { mapActions,mapState, mapMutations} from 'vuex'
  import CommentList from "@/components/website/CommentList"
  import CommentBox from "@/components/website/CommentBox"
  import {replyComment,treeListComment} from '@/api/comment'
  export default {
    name: 'ckplayerPlugin',
    components: {
      vueCkplayer,
      CommentList,
      CommentBox
    },
    computed:{
      ...mapState(['userInfo'])
    },
    data () {
      return {
        activeName:'description',
        video:{},
        movie:{},
        videoUrl:"",
        playStyle:{"background":{"backgroundColor":"0x000000","stretched":3,
            "align":"center","vAlign":"middle","spacingLeft": 0,"spacingTop":0,"spacingRight":0,"spacingBottom":0},
          "controlBar":{"align":"left","vAlign":"bottom","width":"100%","height":40,"offsetX":0,"offsetY":-40,
            "hideControlBar":{"hideEnvironment":"all","hideDelayTime":"1000","hideMode":"alpha",
              "hideTweenTime":0.8,"showSimpleSchedule":"all",
              "simpleSchedule":{
              "backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","align":"left","vAlign":"bottom","offsetX":"0","offsetY":"-2"}},"background":{"backgroundColor":"0xFFFFFF","backgroundImg":"","alpha":1},"button":{"play":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"left","vAlign":"top","marginX":0,"marginY":0,"offsetX":0,"offsetY":0,"clickEvent":"actionScript->videoPlay"},"pause":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"left","vAlign":"top","marginX":0,"marginY":0,"offsetX":0,"offsetY":0,"clickEvent":"actionScript->videoPause"},"mute":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-334,"marginY":0,"offsetX":-284,"offsetY":0,"clickEvent":"actionScript->videoMute"},"escMute":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-334,"marginY":0,"offsetX":-284,"offsetY":0,"clickEvent":"actionScript->videoEscMute"},"full":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-40,"marginY":0,"offsetX":-40,"offsetY":0,"clickEvent":"actionScript->fullScreen"},"escFull":{"mouseOut":"","mouseOver":"","width":40,"height":40,"align":"right","vAlign":"top","marginX":-40,"marginY":0,"offsetX":-40,"offsetY":0,"clickEvent":"actionScript->quitFullScreen"},"backLive":{"mouseOut":"","mouseOver":"","align":"left","vAlign":"top","marginX":110,"marginY":0,"offsetX":110,"offsetY":7,"clickEvent":"actionScript->backLive"}},
            "definition":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":70,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":70,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},
              "buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":70,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},"defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-110,"marginY":5,"offsetX":-110,"offsetY":5},"backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-125,"offsetY":-45,"height":true},"backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-125,"offsetY":45},"event":"click"},"subtitle":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":60,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":60,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":60,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},"defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-170,"marginY":5,"offsetX":-170,"offsetY":5},
              "backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-185,"offsetY":-45,"height":true},
              "backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-185,"offsetY":45},"event":"click"},
            "playbackrate":{"defaultButton":{"backgroundColor":"","overBackgroundColor":"","backgroundAlpha":1,"border":0,"borderColor":"","radius":3,"width":50,"height":30,"lineHeight":30,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"background":{"backgroundColor":"0xFFFFFF","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":10,"paddingLeft":15,"paddingTop":10,"paddingRight":15,"paddingBottom":10,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0xFFFFFF","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"button":{"backgroundColor":"0xFFFFFF","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":50,"height":28,"lineHeight":28,"align":"center","size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0x313131","overTextColor":"0xe67700","bold":false,"alpha":1},"buttonHighlight":{"backgroundColor":"0x313131","overBackgroundColor":"0x515151","backgroundAlpha":0.8,"border":0,"borderColor":"","radius":6,"width":50,"height":28,"lineHeight":28,"align":"center","padding":0,"size":14,"font":"Microsoft YaHei;微软雅黑","textColor":"0xFFFFFF","overTextColor":"0xFFFFFF","bold":"false","alpha":1},"separate":{"marginLeft":5,"marginTop":5,"marginRight":5,"marginBottom":5,"color":"0xFFFFFF","alpha":0,"height":1},
              "defaultButtonCoor":{"align":"right","vAlign":"top","marginX":-220,"marginY":5,"offsetX":1000,"offsetY":5},
              "backgroundCoor":{"align":"right","vAlign":"bottom","offsetX":-235,"offsetY":-45,"height":true},
              "backgroundCoorH5":{"align":"right","vAlign":"bottom2","offsetX":-235,"offsetY":45},"event":"click"},
            "volumeSchedule":{"backgroundImg":"","maskImg":"","align":"right","vAlign":"top","width":60,"height":12,"backgroundHeight":12,"marginX":-290,"marginY":14,"offsetX":-240,"offsetY":14,"button":{"mouseOut":"","mouseOver":"","vAlign":"top","width":16,"height":12,"marginX":0,"marginY":0}},"timeSchedule":{"default":{"backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","height":6,"align":"left","vAlign":"top","marginX":0,"marginY":-6,"offsetX":0,"offsetY":-10},"mouseOut":{"backgroundImg":"","loadProgressImg":"","playProgressImg":"","width":"100%","height":1,"align":"left","vAlign":"top","marginX":0,"marginY":-1,"offsetX":0,"offsetY":-1},"buttonContainer":{"width":"100%","height":14,"align":"left","vAlign":"bottom","offsetX":0,"offsetY":-50},"button":{"mouseOut":"","mouseOver":"","width":18,"height":14},"defaultHideTime":"0.3","defaultShowTime":"0.3","mouseOutHideTime":"0.3","mouseOutShowTime":"0.3"},"timeText":{"vod":{"text":"[$vodLanguage]","align":"left","vAlign":"top","marginX":48,"marginY":7,"offsetX":48,"offsetY":7,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0x313131","alpha":1,"bold":false,"lineHeight":25},"live":{"text":"[$liveLanguage]","align":"left","vAlign":"top","marginX":48,"marginY":7,"offsetX":48,"offsetY":7,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0x313131","alpha":1,"bold":false,"lineHeight":25}},"custom":{"button":{},"images":{"definitionSeparator":{"img":"","align":"right","vAlign":"top","marginX":-110,"marginY":0,"offsetX":-110,"offsetY":0,"width":1,"height":40},"subtitleSeparator":{"img":"","align":"right","vAlign":"top","marginX":-170,"marginY":0,"offsetX":-170,"offsetY":0,"width":1,"height":40},"playbackrateSeparator":{"img":"","align":"right","vAlign":"top","marginX":-220,"marginY":0,"offsetX":1000,"offsetY":0,"width":1,"height":40}},"swf":{}}},"centerPlay":{"mouseOut":"","mouseOver":"","width":80,"height":64,"align":"center","vAlign":"middle","offsetX":-40,"offsetY":-32,"clickEvent":"actionScript->videoPlay"},"buffer":{"file":"","align":"center","vAlign":"middle","offsetX":-30,"offsetY":-30,"text":{"align":"center","vAlign":"middle","offsetX":-30,"offsetY":-12,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":false,"width":60,"textAlign":"center"}},"custom":{"button":"","images":"","swf":""},"error":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":false,"width":200,"textAlign":"center","align":"center","vAlign":"middle","marginX":-100,"marginY":-30,"offsetX":-100,"offsetY":0,"lineHeight":30,"height":30},"advertisement":{"background":{"backgroundColor":"0x000000","alpha":1,"width":"100%","height":"100%"},"reserve":{"spacingLeft":30,"spacingTop":0,"spacingRight":30,"spacingBottom":0,"align":"center","vAlign":"middle"},"countDown":{"backgroundColor":"","backgroundImg":"","alpha":1,"radius":0,"height":34,"width":34,"align":"right","vAlign":"top","offsetX":-44,"offsetY":10},"countDownText":{"size":16,"font":"Microsoft YaHei;微软雅黑","color":"0xffffff","alpha":1,"bold":"false","width":25,"textAlign":"center","align":"right","vAlign":"top","height":34,"lineHeight":34,"offsetX":-39,"offsetY":15,"marginY":10},"muteButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":34,"offsetX":-85,"offsetY":10,"clickEvent":"actionScript->adMute"},"escMuteButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":34,"offsetX":-85,"offsetY":10,"clickEvent":"actionScript->escAdMute"},"skipAdButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":80,"height":34,"offsetX":-173,"offsetY":10,"clickEvent":"javaScript->adjump"},"skipDelay":{"backgroundColor":"","backgroundImg":"","alpha":1,"radius":0,"height":34,"width":139,"align":"right","vAlign":"top","offsetX":-230,"offsetY":10},"skipDelayText":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","alpha":1,"bold":"false","width":25,"height":34,"lineHeight":34,"textAlign":"right","align":"right","vAlign":"top","offsetX":-222,"offsetY":15,"marginY":10},
            "adLinkButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"bottom","width":81,"height":34,"offsetX":-90,"offsetY":-40,"clickEvent":"actionScript->openAdLink"},"closeButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":28,"height":28,"offsetX":-14,"offsetY":-14,"clickEvent":"actionScript->closePauseAd"},"closeOtherButton":{"mouseOut":"","mouseOver":"","align":"right","vAlign":"top","width":34,"height":18,"offsetX":-34,"offsetY":-18}},"video":{"reserve":{"spacingLeft":0,"spacingTop":0,"spacingRight":0,"spacingBottom":0,"stretched":1,"align":"center","vAlign":"middle"},"controlBarHideReserve":{"spacingLeft":0,"spacingTop":0,"spacingRight":0,"spacingBottom":0,"stretched":1,"align":"center","vAlign":"middle"}},"prompt":{"height":25,"lineHeight":25,"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","bold":"false","alpha":0.8,"backgroundColor":"0x333333","backgroundAlpha":0.8,"border":0,"borderColor":"0x333333","radius":3,"borderRadius":3,"paddingLeft":15,"paddingTop":2,"paddingRight":15,"paddingBottom":4,"marginBottom":5,"triangleWidth":15,"triangleHeight":10,"triangleBackgroundColor":"0x333333","triangleBorder":0,"triangleBorderColor":"0xFFFFFF","triangleAlpha":0.8,"triangleDeviationX":0,"triangleDeviationY":0},"promptSpot":{"color":"0xFFFFFF","alpha":1,"width":6,"height":6,"radius":6},"promptSpotH5":{"width":6,"height":6,"alpha":1,"backgroundColor":"0xFFFFFF","vAlign":"top","marginY":4,"borderRadius":6},"previewPrompt":{"size":14,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","lineHeight":25,"bold":false,"alpha":1,"backgroundColor":"0x000000","backgroundAlpha":0,"border":0,"borderColor":"0x333333","radius":0,"paddingLeft":15,"paddingTop":2,"paddingRight":15,"paddingBottom":8,"marginBottom":0,"textWidth":150,"textHeight":0},"preview":{"border":6,"borderColor":"0x004eff","alpha":1,"bottom":50},"cktrack":{"size":16,"font":"Microsoft YaHei;微软雅黑","color":"0xFFFFFF","bold":true,"alpha":1,"leading":30,"marginBottom":50},"png-1-1":""}
         ,
        fileUploadHost:'http://localhost:7070',
        comments: [],
        commentInfo: {
          sid: this.$route.params.videoId
        }
      }
    },
    created(){
      this.getVideoById();
      this.getCommentList();
    },
    mounted(){
    },
    watch:{
      "$route":{
        handler(route){
            this.getVideoById();
        }
      }
    },
    methods:{
       getVideoById(){
          const videoId = this.$route.params && this.$route.params.videoId;
          movieApi.getMovieVideo(videoId).then(response => {
            this.video=response.data.video;
            this.movie=response.data.movie;
            this.videoUrl =this.fileUploadHost+this.video.url;
            this.player();
          });
      },
      player() {
          this.$nextTick(() => {
            this.$refs.player.loadPlayer(this.videoUrl);
          });
        // this.$refs.player.play();
      },
      setFull() {
        this.$refs.player.setFull()
      },
      pause(){
        this.$refs.player.pause()
      },

      play(){
        this.$refs.player.play()
      },
      setVolume(vol){
        this.$refs.player.setVolume(vol)
      },
      addListenerPlayer(){
        this.$refs.player.addListenerPlayer()
      },
      // 发表评论
      submitBox(e) {
        let params = {};
        params.sid = e.sid;
        params.content = e.content;
        params.commentId = e.commentId;
        params.createTime = e.createTime;
        params.updateTime = e.createTime;
        params.tableName = 'wm_video';
        params.url = this.$route.path;
        params.support = 0;
        params.oppose = 0;
        replyComment(params).then(response => {
          if (response.code == 200){
            this.msgSuccess("发表成功！")
            this.getCommentList()
          }else{
            this.msgError("发表失败！")
          }
        });
      },
      getCommentList: function () {
        let params = {};
        params.sid = this.commentInfo.sid
        treeListComment(params).then(response => {
          if (response.code == 200) {
            this.comments = response.rows;
            console.log(this.comments)
          }
        });
      }

    }
  }
</script>

<style scoped>

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    height: 420px;
    overflow: auto;
  }

  .container{width:1400px;}

</style>
